import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { HeaderWrapper, HeaderLeft, HeaderRight } from "./style";
import { Input } from "antd";
import { SearchOutlined } from "@ant-design/icons";

import { headerList } from "@/common/local-header";

export default memo(function Header() {
  function selectList(item, index) {
    if (index < 3) {
      return <NavLink to={item.path}>{item.title}</NavLink>;
    } else {
      return <a href={item.path}>{item.title}</a>;
    }
  }

  return (
    <HeaderWrapper>
      <div className="content wrap-v1">
        <HeaderLeft>
          <a href="#/" className="logo sprite_01">
            网易云音乐
          </a>
          <div className="select-list">
            {headerList.map((item, index) => (
              <div key={item.title} className="select-item">
                {selectList(item, index)}
                <i className="sprite_01 icon"></i>
              </div>
            ))}
          </div>
        </HeaderLeft>
        <HeaderRight>
          <Input
            placeholder="音乐/视频/电台/用户"
            prefix={<SearchOutlined />}
            className="search"
          />
          <div className="center">创作者中心</div>
          <div className="login">登录</div>
        </HeaderRight>
      </div>
      <div className="divider"></div>
    </HeaderWrapper>
  );
});
